<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js注册提示框</title>
<meta content="" name="description">
<script type="text/javascript" src="/j-tool/jquery.js"></script>
<style>
	*{margin:0;padding:0}
	b{color:gray;position: absolute;line-height:24px;margin-left: 5px;}
	b.error{color:red;}
	b.ok{color:green;}
	dl{font-size:12px;height:35px;}
	dt,dd{float:left;}
	dl input{height: 20px;line-height:20px;width: 160px;}
	dl dt{padding: 7px 0 3px;}
</style>
<body>
	<div style="width:200px;margin:0 auto;padding-top: 9px;">
		<form action="" id="regForm" method="post"/>
			<dl>
				<dt>昵称：</dt><dd><input type="text" name="nick"/></dd>
			</dl>
			<dl>
				<dt>地址：</dt><dd><input type="text" name="address"/></dd>
			</dl>			
			<div style="height: 30px;padding-left: 36px;"><input style="height:30px;" type="image" src="/public/img/greenbig.png" value="提交数据"/></div>
		</form>
	</div>
</body>
<script>
	var Reg = function(id)
	{
		var T = this;
		T.id = id;
		T.init = function()
		{
			T.click();
			T.submit();
		}

		T.click = function()
		{
			$.each(R.words, function(i, n){
				T.listen(i,n);
			});
		}
		
		T.submit = function()
		{
			$("form[id="+T.id+"]").submit(function(){
				$.each(R.words, function(i, n){
					T.erro = T.code(i);
					T.inNotice('input[name='+i+']',n,T.erro);									
					if(T.erro > 0)
					{
						return false;
					}
				});
				if(T.erro > 0)
				{
					return false;
				}
			});
		}

		T.listen = function(name,word)
		{
			$('input[name='+name+']').focus(function(){
				T.inNotice(this,word,T.code(name));

			});

			$('input[name='+name+']').blur(function(){
				T.erro = T.code(name);
				T.outNotice(this,word,T.code(name));
			});
		}
		
		T.inNotice = function(self,word,erroCode)
		{
			var msg;

			if(erroCode == 0)
			{
				msg = "<b class=ok>OK</b>";
			}else if(erroCode == 1)
			{
				msg = "<b>"+word[erroCode]+"</b>";
			}else{
				msg = "<b class=error>"+word[erroCode]+"</b>"
			}

			if($(self).next().is("b"))
			{
				$(self).next().replaceWith(msg);
			}else{
				$(self).after(msg);
			}
		}
		
		T.outNotice = function(self,word,erroCode)
		{
			var msg;

			if(erroCode == 0)
			{
				msg = "<b class=ok>OK</b>";
			}else if(erroCode == 1)
			{
				msg = "<b>"+word[erroCode]+"</b>";
			}else{
				msg = "<b class=error>"+word[erroCode]+"</b>"
			}

			if($(self).next().is("b"))
			{
				$(self).next().replaceWith(msg);
			}else{
				$(self).after(msg);
			}
		}

		T.code = function(name)
		{
			var i = 0;
			var val = $('input[name='+name+']').val();
			switch(name)
			{
				case 'nick':
					if(!val)
					{
						i = 1;
					}else if($.trim(val) != val)
					{
						i = 3;
					}else if(val.length > 5)
					{
						i = 4;
					}else
					{
						i = 0;
					}
				break;
				case 'address':
					if(!val)
					{
						i = 1;
					}else if(val.length < 3)
					{
						i = 3;
					}else if(val.length > 10)
					{
						i = 2;
					}else
					{
						i = 0;
					}
				break;
				case 'psw2':

				break;
			}
			return i;
		}
	}

	var R = new Reg('regForm');
		R.words = {
					  'nick':['','填写nick必须符合规则','昵称为必填项目，请填写','昵称首尾不能有空格','昵称太长了'],
					  'address':['','填写地址必须符合规则','太长','太短','不能包含特殊字符'],
					  'psw2':['','填写psw2必须符合规则','不一致']
				  };
		R.init();
</script>
</html>